<template>
	<div class="tool-title-box">
		<h3>图片设置</h3>
		<div class="operation-box">
			<div class="item-box flex-style">
				<div class="title">图片高度</div>
				<div class="block">
					<el-slider :show-input-controls="false" input-size="mini" :min="1" :max="1000" v-model="activeComponent.data.height" show-input></el-slider>
				</div>
			</div>
			<div class="item-box">
				<div class="title">填充方式</div>
				<div class="modify-box">
					<el-select v-model="activeComponent.data.fit" placeholder="请选择">
						<el-option label="contain" value="contain"></el-option>
						<el-option label="cover" value="cover"></el-option>
						<el-option label="fill" value="fill"></el-option>
						<el-option label="none" value="none"></el-option>
						<el-option label="scale-down" value="scale-down"></el-option>
						<!-- <el-option label="inherit" value="inherit"></el-option>
						<el-option label="initial" value="initial"></el-option>
						<el-option label="revert" value="revert"></el-option>
						<el-option label="revert-layer" value="revert-layer"></el-option>
						<el-option label="unset" value="unset"></el-option> -->
					</el-select>
				</div>
			</div>
			<tool-single-img v-model:imageUrl="activeComponent.data.imageUrl" tip="建议尺寸: 16 : 9等比例图片, 高度自适应"></tool-single-img>
			<tool-select-link v-model:linkObj="activeComponent.data.linkObj" title="图片链接"></tool-select-link>
		</div>
	</div>
</template>

<script lang="ts">
	import { toRefs, reactive, computed } from 'vue';
	import { useStore } from '/@/store/index';

	import ToolSingleImg from '/@/views/decorator/components/toolBar/module/tool-single-img.vue';
	import ToolSelectLink from '/@/views/decorator/components/toolBar/module/tool-select-link.vue';
	
	export default {
		name: 'image-tool',
		components: {
			ToolSelectLink,
			ToolSingleImg,
		},
		setup() {
			const store = useStore();
			const state = reactive({
				
			});
			state.terminal = computed(() => store.state.decorator.terminal);
			state.activeComponent = computed(() => store.state.decorator.activeComponent);
			
			return {
				...toRefs(state)
			}
		}
	}
</script>

<style lang="scss" scoped>
@import './scss/index.scss';
</style>
